<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/css/content.css">
  <script src="/libs/jquery/jquery-3.4.1.min.js"></script>
</head>
<body>
  <!-- HEADER开始 -->
  <header>   
  </header>
  <main> 
    <div class="content" >
      <div class="con" id="design">

      </div>
        <script type="text/html" id="detailTemplate">
        <div class="shop">
          <div class="scope">
            <h1>{{sub}}{{title}}</h1>
            <div class="itemmain">
              <img src="{{img[0]}}" alt="" class="zoom-image">
              <ul class="item">
                <li><strong>品牌：</strong> {{bandname}} </li>
                <li><strong>香调：</strong> {{nuance}} </li>
                <li><strong>前调：</strong> {{topnotes}} </li>
                <li><strong>中调：</strong> {{hearnotes}} </li>
                <li><strong>后调：</strong> {{postnotes}} </li>
                <li><strong>属性：</strong> {{nature}} </li>
                <li><strong>调香师：</strong> {{perfumer}}</li>
                <li><strong>标签：</strong> {{label}}</li>
              </ul>          
            </div>
            <ul class="item1">
              {{each img img}}
              <li><img src="{{img}}" alt=""></li>
              {{/each}}
            </ul>
          </div>
          <div class="newshop">
            <div class="newtitle">
              <span>价钱</span>
              <strong>{{price}}</strong>
            </div>
            <div class="skin">
              <span>净含量</span>
              <ul>
                {{each size item}}
                <li><a href="">{{item}}</a> </li>
                <!-- <li><a href="">50mL</a> </li> -->
                {{/each}}
              </ul>
            </div>
            <div class="prop">
              <span>产品分类</span>
              <ul id="gal1">
                {{each imgs img}}
                <li>
                <a href="javascript:;" data-image="{{img}}" data-zoom-image="{{img}}">
                  <img src="{{img}}"  class="smallpic">
                </a>
              </li>
                {{/each}}
              </ul>
            </div>
            <a href="javascript:;" class="gwc" id="btn-gwc" >加入购物车</a>
          </div>
        </div>
        <div class="details">
          <h2>商品详情</h2>
        </div>
      </script>
    </div>
    
  </main>

  <footer>
    香水时代网所有产品设计及其展示形式，独家文字，均已受版权或产权保护。<br>
官方产品图及商标知识产权归品牌所有。香水评论均为本网会员上传，著作权归原作者所有，不代表本站立场。<br>
未经授权禁止转载、摘编、复制或建立镜像，违者将依法追究责任，特此声明。<br>
  </footer>
  <div id="cart" class="cart">
    <span>0</span>
  </div>
  <!-- HEADER结束 -->
  <!-- 在引入require.js的这个script标签身上写一个自定义属性data-main,属性值就是要引入的js路径 -->
  <!-- require.js会帮助我们去找到index.js并引入 -->
  <script src="/libs/require/require.min.js" data-main="/js/content"></script>
</body>
</html>